<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>自定义元素 Web Components</title>
	</head>

	<body>
		<script>
			// 方式一
			class Btn1 extends HTMLElement {
				constructor() {
					super();
					// 开启样式隔离
					const shaDom = this.attachShadow({ mode: 'open' });
					this.p = this.h('p');
					this.p.innerText = 'test';
					this.p.setAttribute('style', 'fontSize:20px;color:red;border:1px solid teal;padding:8px 10px');
					shaDom.appendChild(this.p);
				}
				h(el) {
					return document.createElement(el);
				}
				/**
				 * 生命周期
				 */
				//当自定义元素第一次被连接到文档 DOM 时被调用。
				connectedCallback() {
					console.log('我已经插入了！！！嗷呜');
				}

				//当自定义元素与文档 DOM 断开连接时被调用。
				disconnectedCallback() {
					console.log('我已经断开了！！！嗷呜');
				}

				//当自定义元素被移动到新文档时被调用
				adoptedCallback() {
					console.log('我被移动了！！！嗷呜');
				}
				//当自定义元素的一个属性被增加、移除或更改时被调用
				attributeChangedCallback() {
					console.log('我被改变了！！！嗷呜');
				}
			}
			// 方式二 template 创建
			class Btn2 extends HTMLElement {
				constructor() {
					super();
					// 开启样式隔离
					const shaDom = this.attachShadow({ mode: 'open' });
					this.template = this.h('template');
					this.template.innerHTML = `
				<style>
					p{ fontSize:20px; color:red; border:1px solid teal; padding:8px 10px ; width:200px }
				</style>
				<p>123</p>
				`;
					shaDom.appendChild(this.template.content.cloneNode(true));
				}
				h(el) {
					return document.createElement(el);
				}
			}
			// 方式三 template创建并提取到外层
			class Btn3 extends HTMLElement {
				constructor() {
					super();
					// 开启样式隔离
					const shaDom = this.attachShadow({ mode: 'open' });

					// 绑定样式和内容
					const template = document.querySelector('#btn3');
					shaDom.appendChild(template.content.cloneNode(true));
				}

				// 获取传参
				getAttr(attr) {
					return this.getAttribute(attr);
				}
			}

			// 注册元素
			window.onload = () => {
				window.customElements.define('my-btn1', Btn1);
				window.customElements.define('my-btn2', Btn2);
				window.customElements.define('my-btn3', Btn3);
			};
		</script>

		<template id="btn3">
			<style>
				div {
					background: red;
				}
			</style>
			<div>我是template里面的内容</div>
		</template>

		<my-btn1></my-btn1>
		<my-btn2></my-btn2>
		<my-btn3 age="20"></my-btn3>
	</body>
</html>
